import React, { Component } from "react";
import Taro from '@tarojs/taro';
import { View,Image,Text,Button,Input } from '@tarojs/components';
import { AtAvatar,AtCountdown,AtGrid } from 'taro-ui';
import './indexpingdetail.scss'
class Indexpingdetail extends Component {
    constructor () {
        super(...arguments)
        this.state = {
          current: 0,
          isOpen:false,
          listdetail:[]
        }
      }
      onTimeUp () {
        Taro.showToast({
          title: '时间到',
          icon: 'success',
          duration: 2000
        })
      }
      handleClick (value) {
        this.setState({
          current: value
        })
      }
      handleClose=()=>{
        this.setState({isOpen:false})
    }
    handleCancel=()=>{
        this.setState({isOpen:false})
    }
    handleConfirm=()=>{
        this.setState({
            isOpen:false
        })
    }
    gotodorddet(){
        Taro.navigateTo({
            url: './../../pages/mineorderdet/mineorderdet'
          })
    }
      componentDidMount() {
        this.getListDetail();
      }
      getListDetail(){
        Taro.request({
          method:"POST",
          url: 'http://123.57.67.148:3000/mock/573/newproduct',
          data: {
            listdetail: 'listdetail',
            bar: 10
          },
          header: {
            'content-type': 'application/json'
          }
        })
          .then(res =>{
            this.setState({
              listdetail:res.data.newproduct
            })
            console.log(res.data)
          })
      }
    render () {
      return <View className='container'>
    <View style='font-size:18px'><View className='order'>
                  <View className='ordercontent'>
                    <View className='ordermid1'>
                      
                        <View className='orderimg'>
                            <Image src="https://gd1.alicdn.com/imgextra/i1/2867278025/O1CN01HWyjf0299V0xbTCDK_!!2867278025.jpg" style='height:150px;width:150px'></Image>
                        </View>
                           <View>
                              <View className='ordername'>
                             <Text>乐町2020夏季风衣女洋气小个子英伦风卡其色甜美外套气质</Text>   
                           </View>
                           <View className='countdown'>
                             <Text>规格：规格1</Text>
                           </View>
                           <View className='oderimgtext'>
                           <Text className='oderimgtext1'>4人团</Text>
                               <Text style='font-size:25px'>￥78</Text>
                               
                               <View className='ping'>
                                 <Text>拼团中</Text>
                               </View>
                          </View> 
                           </View>
                       
                    </View>
                    
                  </View>
            
</View></View>
                     <View className='middle'>
                      <View style='font-size:18px'>本团将于
                        <AtCountdown
                          isCard
                          minutes={1}
                         seconds={10}
                          />
                      </View>
                      <View>
                        <Text style='font-size:18px'>还差1个好友成团，赶快邀请好友吧</Text>
                      </View>
                      <View className='midtou'>
                        <View style='height:50px;width:50px' className='midtou1'>
                          <AtAvatar circle image='https://jdc.jd.com/img/200' ></AtAvatar>
                        </View>
                        <View style='height:50px;width:50px'>
                          <AtAvatar circle image='https://jdc.jd.com/img/200' ></AtAvatar>
                        </View>
                      </View>
                    </View>
                    <View className='midtop'>
                    <AtGrid hasBorder={false} data={
  [
    {
      image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png',
      value: '支付开团/参团'
    },
    {
      image: 'https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png',
      value: '邀请好友参团'
    },
    {
      image: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png',
      value: '人满成团'
    }
  ]
} />
                    </View>
                    <View className='middledetail'>
{this.state.listdetail.map((item, index) => {
          console.log(item)
              return (
                  <View className='middet' key={index}>
                    <View className='middetimg'>
                      <Image className='middetimgs' style='width:150px;height:150px' src={item.imgurl}/>
                    </View>
                    <View className='iontDe'>
                      <Text >{item.name}</Text>
                    </View>
                    <View className='bottomtext' style='font-size:18px'>
                      <View>
                        <Text>￥{item.price}</Text>
                    </View>
                    <View>
                        <Text>251人已买</Text>
                    </View>
                    </View>
                  </View>
              )
            })}
</View>
<View className='tab'>
  <View className='tableft' style='font-size:20px'>
    <Text>更多拼团</Text>
  </View>
  <View className='tabright' style='font-size:20px'>
  <Text>还差1人拼团成功</Text>
  </View>
</View>
          </View>
          
    }
  }
  
  export default Indexpingdetail